<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Object Modification</title>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        
        body > .el-container {
            margin-bottom: 40px;
        }
    </style>
    <!-- vue2 -->
    <script src="script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jquery 3.6 -->
    <script src="script/jquery-3.6.0.min.js"></script>

    <script>
        var app;
        $(function(){
            app = new Vue({
            el: '#app',
            data: {
				items: [ ],
                dict:{ }
            }
        });
            var sketch = JSON.parse($("#jo_sketch").val());            
            //从sketch结构构建缓存
            for (let index = 0; index < sketch.Subs.length; index++) {
                const element = sketch.Subs[index];
                let o = {name:element.N,value:element.V};
                app.items.push(o);
                app.dict[element.N]=o;
            }
        });

        function RandomData(){
            var data = JSON.parse($("#jo_data").val());
            //遍历data，解析数据并更新缓存值
            var dkeys = Object.keys(data);
            for (let j = 0; j < dkeys.length; j++) {
                if(app.dict.hasOwnProperty(dkeys[j]))
                    app.dict[dkeys[j]].value = data[dkeys[j]];
            }
        };
    </script>
</head>
<body>
    <input id="jo_sketch" name="jo_sketch" type="hidden" value='{"D":"示例框架","Subs":[{"V":0,"N":"A"},{"V":1,"N":"B"},{"V":2,"N":"C"}]}' />
    <input id="jo_data" name="jo_data" type="hidden" value='{"A":100,"C":"hundred","D":true}'/>
    <div id="app">
        <el-container>
            <el-header>Interesting Items</el-header>
            <el-main>
                <el-table :data="items">
                    <el-table-column prop="name" label="名称" :span="8"></el-table-column>
                    <el-table-column prop="value" label="数值" :span="16"></el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <input type="button" value="修改数值" onclick="RandomData()">
    </div>
</body>